<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>住房补贴申领</el-breadcrumb-item>
      <el-breadcrumb-item>补贴信息填写</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card
      v-loading="preloading"
      element-loading-text="数据拼命加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div slot="header" class="clearfix">
        <span style='font-size: 18px;font-weight:800'>补贴信息填写</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="refresh">
          <i class="el-icon-refresh"></i>
        </el-button>
      </div>

      <!-- 补贴文件上传 -->
      <el-row type="flex" justify="space-between">
        <el-col>
          <div style='font-size: 15px;font-weight:800'>
            补贴文件上传
          </div>
        </el-col>
        <el-col :span="4">
          <el-switch
            v-model="showAllFiles"
            active-text="显示必传"
            inactive-text="显示全部">
          </el-switch>
        </el-col>
      </el-row>
      <!-- 上传组件列表 -->
      <SubsidesFile :showAllFiles="showAllFiles" :allowanceId="baseInfo.allowanceId"></SubsidesFile>

      <!-- 指标文标题区域 -->
      <el-row style='display: flex!important;align-items: center!important;' :gutter="20">
        <el-col :span="22">
          <div style='font-size: 15px;font-weight:800'>
            已选择指标文
          </div>
        </el-col>
        <el-col :span="2" style='display: flex;justify-content: right'>
          <el-button type="primary" size="small" @click='chooseIndicatorDialog()'>选择</el-button>
        </el-col>
      </el-row>

      <!-- 指标文列表 -->
      <el-table :data="indicatorlist" :row-class-name="indexTextTableRowClassName" border  :header-cell-style="{background:'#eee',color:'#606266',fontSize: '12px'}">
        <!-- 索引列 -->
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="指标文号" prop="zbwh"></el-table-column>
        <el-table-column label="单位名称" prop="dwmc"></el-table-column>
        <el-table-column label="合计金额(元)" prop="hjje"></el-table-column>
        <el-table-column label="合计已拨金额(元)" prop="hjybje"></el-table-column>
        <el-table-column label="剩余金额(元)" prop="syje"></el-table-column>
        <el-table-column label="资金来源" prop="zjly"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-delete" size="mini" @click.native.prevent="deleteIndicator(scope.$index, indicatorlist)">删除</el-button>
            <el-popover v-if="scope.row.state === '标红'" placement="top-end" title="提示：" width="240" trigger="click" :content="scope.row.remark">
              <el-button slot="reference" type="text" icon="el-icon-view" size="mini">错误原因</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>

      <!-- 员工录入标题区域 -->
      <el-row style='display: flex!important;align-items: center!important;margin-top: 15px;' :gutter="30">
        <el-col :span="17">
          <div style='font-size: 15px;font-weight:800'>
            职工录入
          </div>
        </el-col>
        <el-col :span="2" style='margin-right: 10px'><el-button type="primary" @click="deleteStafflist" size="small">清空员工</el-button></el-col>
<!--        <el-col :span="2" style='margin-right: 15px;'><el-button type="primary" @click="chooseStaffDialog()" size="small">选择职工录入</el-button></el-col>-->
        <el-col :span="2" style='margin-right: 15px;'><el-button type="primary" @click="addStaffDialog()" size="small">添加职工信息</el-button></el-col>
        <el-col :span="2" style='margin-right: 20px;'><el-button type="primary" @click="uploadExcelDialog()" size="small">导入Excel</el-button></el-col>
      </el-row>

      <!-- 职工 -->
      <el-table :data="stafflist" border :row-class-name="employeeTableRowClassName" :header-cell-style="{background:'#eee',color:'#606266',fontSize: '12px'}">
        <!-- 索引列 -->
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="姓名" prop="name" width="150px"></el-table-column>
        <el-table-column label="状态" prop="registerState" width="150px"></el-table-column>
        <el-table-column label="身份证号" prop="idNumber"></el-table-column>
        <el-table-column label="补贴金额(元)" prop="amount"></el-table-column>
        <el-table-column label="预补金额(元)" prop="preFillingAmount"></el-table-column>
        <el-table-column label="银行卡号" prop="cardNumber"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" size="mini" @click="editStaffDialog(scope.$index,scope.row)">修改</el-button>
            <el-button type="text" icon="el-icon-delete" size="mini" @click.native.prevent="deleteStaff(scope.$index, stafflist)">移除</el-button>
            <el-button type="text" icon="el-icon-tickets" v-show="scope.row.registerState === '死亡'" @click="addInheritorDialog(scope.row)" size="mini">录入继承人</el-button>
            <el-popover v-if="scope.row.state === '标红'" placement="top-end" title="提示：" width="240" trigger="click" :content="scope.row.remark">
              <el-button slot="reference" type="text" icon="el-icon-view" size="mini">错误原因</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>

      <!-- 统计信息标题 -->
      <el-row style='display: flex!important;align-items: center!important;margin-top: 15px;' :gutter="20">
        <el-col :span="20">
          <div style='font-size: 15px;font-weight:800'>
            统计信息
          </div>
        </el-col>
      </el-row>

      <!-- 统计列表区域 -->
      <el-table :data="statisticslist" border stripe :cell-style="{fontWeight: 'bold', color: '#0066FF', fontSize:'15px'}" :header-cell-style="{background:'#eee',color:'#606266',fontSize: '12px'}">
        <!-- 索引列 -->
        <el-table-column label="已选指标文总金额(元)" prop="zbwzje"></el-table-column>
        <el-table-column label="已选指标文剩余总金额(元)" prop="zbwsyzje"></el-table-column>
        <el-table-column label="已选职工发放总金额(元)" prop="yxzgffje"></el-table-column>
      </el-table>

      <el-row type="flex" justify="center" style='display: flex!important;align-items: center!important;justify-content: flex-end; margin-top: 10px' :gutter="20">
        <el-col style='display: flex!important;justify-content: flex-start' :span="2">
          <el-tooltip  effect="dark" content="暂存后可继续修改" placement="top" :enterable="false">
            <el-button type="primary" @click="tempSave()">暂存</el-button>
          </el-tooltip>
        </el-col>
        <el-col style='display: flex!important;justify-content: flex-start' :span="2">
          <el-tooltip  effect="dark" content="提交后,审批前不可修改" placement="top" :enterable="false">
          <el-button type="primary" @click="commit()">提交</el-button>
          </el-tooltip>
        </el-col>
        <el-col style='display: flex!important;justify-content: flex-start' :span="2">
          <el-button type="primary" @click="cancel()">取消</el-button>
        </el-col>
      </el-row>

    </el-card>

    <!-- 选择指标文对话框 -->
    <el-dialog title="选择指标文" :visible.sync="setChooseDialogVisible" width="70%">
      <!-- 搜索与添加区域 -->
      <el-row style='display: flex!important;align-items: center!important;' :gutter="10">
        <el-col :span="3">
          <span style="font-weight: 900;font-size: 16px">筛选条件</span>
        </el-col>
        <el-col :span="8">
          <el-switch
            class="allowanceSwitch"
            v-model="chooseListInfo.onlyHaveBalance"
            active-text="只查看剩余金额大于零的指标文"
            @change="getChooseList()">
          </el-switch>
        </el-col>
        <!-- <el-col :span="2">
          单位名称
        </el-col>
        <el-col :span="5">
          <el-input placeholder="请输入单位名称" v-model="chooseListInfo.mhDwmc">
          </el-input>
        </el-col>
        <el-col :span="2">
          单位名称
        </el-col>
        <el-col :span="5">
          <el-select clearable  v-model="chooseListInfo.dwmc">
            <el-option
              v-for="item in institutionNames"
              :key="item.dwmc"
              :label="item.dwmc"
              :value="item.dwmc">
            </el-option>
          </el-select>
        </el-col> -->
        <!-- <el-col :span="2">
          资金来源
        </el-col>
        <el-col :span="5">
          <el-select clearable v-model="chooseListInfo.zjly">
            <el-option
              v-for="item in fundingSources"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="medium" @click='getChooseList'>查询</el-button>
        </el-col> -->
      </el-row>

      <el-row style='display: flex!important;align-items: center!important;margin-top: 10px;' :gutter="10">
        <el-col :span="15">
          <span style="font-weight: 900;font-size: 16px">查询结果</span>
        </el-col>
      </el-row>

      <el-table ref="multipleTable" @selection-change="handleSelectionChange" :data="chooseList" border stripe>
        <!-- 索引列 -->
        <el-table-column type="selection" width="65"></el-table-column>
        <el-table-column label="指标文号" prop="zbwh"></el-table-column>
        <el-table-column label="单位名称" prop="dwmc"></el-table-column>
        <el-table-column label="合计金额" prop="hjje"></el-table-column>
        <el-table-column label="合计已拨金额" prop="hjybje"></el-table-column>
        <el-table-column label="剩余金额" prop="syje"></el-table-column>
        <el-table-column label="资金来源" prop="zjly"></el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination @current-change="handleChooseCurrentChange" @size-change="handleChooseSizeChange" :current-page="chooseListInfo.pageNum"
                     :page-sizes="[1, 3, 5, 10]" :page-size="chooseListInfo.pageSize" :total="chooseListInfo.total" layout="total, sizes, prev, pager, next, jumper" background>
      </el-pagination>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="chooseIndicator">确 定</el-button>
        <el-button @click="setChooseDialogVisible = false">返回</el-button>
      </span>
    </el-dialog>

    <!-- 员工录入对话框 -->
    <el-dialog title="选择职工录入" :visible.sync="chooseStaffDialogVisible" width="70%" @closed="chooseStaffDialogClosed">
      <!-- 搜索与添加区域 -->
      <el-row style='display: flex!important;align-items: center!important;' :gutter="10">
        <el-col :span="3"  style="font-weight: bold; font-size: 16px">
          筛选条件
        </el-col>
        <el-col :span="2"  style="font-weight: bold; font-size: 16px">
          职工姓名
        </el-col>
        <el-col :span="5">
          <el-input placeholder="请输入职工姓名" v-model="addStaffListInfo.name">
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="medium" @click='getStaffList'>查询</el-button>
        </el-col>
      </el-row>

      <el-row style='display: flex!important;align-items: center!important;margin-top: 10px;' :gutter="10">
        <el-col :span="15"  style="font-weight: bold; font-size: 16px">
          查询结果
        </el-col>
      </el-row>

      <el-table ref="multipleTable" @selection-change="handleStaffSelectionChange" :data="addStaffList" border stripe  :header-cell-style="{background:'#eee',color:'#606266'}">
        <!-- 索引列 -->
        <el-table-column type="selection" width="60">
        </el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="身份证号" prop="idNumber"></el-table-column>
        <el-table-column label="性别" prop="sex"></el-table-column>
        <el-table-column label="手机号" prop="phoneNumber">
         <template slot-scope='scope'>
           <span :class="{phoneNullState: !scope.row.phoneNumber}">{{!scope.row.phoneNumber? '暂无': scope.row.phoneNumber}}</span>
         </template>
        </el-table-column>
        <el-table-column label="在册状态" prop="registerState"></el-table-column>
        <el-table-column label="操作" prop="registerState">
          <template slot-scope='scope'>
            <el-button v-if="scope.row.canRemoved" type="danger" @click="deleteStaffReal(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination @current-change="handleStaffCurrentChange" @size-change="handleStaffSizeChange" :current-page="addStaffListInfo.pageNum"
                     :page-sizes="[1, 3, 5, 10]" :page-size="addStaffListInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="addStaffListInfo.total" background>
      </el-pagination>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="chooseStaffs">录入</el-button>
        <el-button @click="chooseStaffDialogVisible = false">返回</el-button>
      </span>
    </el-dialog>

    <!-- 添加职工信息的对话框 -->
    <el-dialog title="添加职工信息" :visible.sync="addStaffDialogVisible" width="35%" @close="addStaffDialogClosed">
      <div style='font-weight: bold; margin-bottom: 15px'>
        个人基本信息填写
      </div>
      <el-row>
        <el-form ref="addStaffFormRef" label-position="left" label-width="100px" :model="addStaff" :rules="addStaffFormRules">
          <el-form-item label="职工姓名" prop="name">
            <el-input v-model="addStaff.name"></el-input>
          </el-form-item>
          <el-form-item label="职工性别" prop="sex">
            <el-radio v-model="addStaff.sex" label='男'>男</el-radio>
            <el-radio v-model="addStaff.sex" label='女'>女</el-radio>
          </el-form-item>
          <el-form-item label="在册状态" prop="idNumber">
            <el-select v-model="addStaff.registerState" placeholder="请选择">
              <el-option
                v-for="item in registerStateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号" prop="idNumber">
            <el-input v-model="addStaff.idNumber"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="addStaff.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" prop="cardNumber" :rules="addStaff.registerState === '正常' ? addStaffFormRules.cardNumber : [{ required: false }]">
            <el-input v-model="addStaff.cardNumber"></el-input>
          </el-form-item>
        </el-form>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addStaffToList">确定</el-button>
          <el-button @click="addStaffDialogVisible = false">返回</el-button>
      </span>
    </el-dialog>

    <!-- 修改职工信息对话框 -->
    <el-dialog title="修改职工信息" :visible.sync="editStaffDialogVisible" width="50%">
      <el-row style='display: flex!important;align-items: center!important;margin-top: 20px;' :gutter="20">
        <el-col :span="3" style='font-size: medium'>
          <span style='color: #bd2c00'>*</span>
          <span>姓名：</span>
        </el-col>
        <el-col :span="7" style='display: flex!important;justify-content: left'>
          <el-input v-model="editStaffInfo.name">
          </el-input>
        </el-col>
      </el-row>
      <el-row style='display: flex!important;align-items: center!important;margin-top: 20px;' :gutter="20">
        <el-col :span="3.5">
          <span style='color: #bd2c00'>*</span>
          <span style='font-size: medium'>在册状态：</span>
        </el-col>
        <el-col :span="7" style='display: flex!important;justify-content: left'>
          <el-select v-model="editStaffInfo.registerState" placeholder="请选择">
            <el-option
              v-for="item in registerStateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style='display: flex!important;align-items: center!important;margin-top: 20px;' :gutter="20">
        <el-col :span="3.5">
          <span style='color: #bd2c00'>*</span>
          <span style='font-size: medium'>补贴金额：</span>
        </el-col>
        <el-col :span="7" style='display: flex!important;justify-content: left'>
          <el-input v-model="editStaffInfo.amount">
          </el-input>
        </el-col>
      </el-row>
      <el-row style='display: flex!important;align-items: center!important;margin-top: 20px;' :gutter="20">
        <el-col :span="3.5">
          <span style='color: #bd2c00'>*</span>
          <span style='font-size: medium'>预补金额：</span>
        </el-col>
        <el-col :span="7" style='display: flex!important;justify-content: left'>
          <el-input :disabled="editStaffInfo.registerState === '死亡'" v-model="editStaffInfo.preFillingAmount">
          </el-input>
        </el-col>
      </el-row>
      <el-row style='display: flex!important;align-items: center!important;margin-top: 20px;' :gutter="20">
        <el-col :span="3.5">
          <span style='color: #bd2c00'>*</span>
          <span style='font-size: medium'>银行卡号：</span>
        </el-col>
        <el-col :span="7" style='display: flex!important;justify-content: left'>
          <el-input v-model="editStaffInfo.cardNumber">
          </el-input>
        </el-col>
      </el-row>
      <el-row style='display: flex!important;align-items: center!important;margin-top: 20px;' :gutter="20">
        <el-col :span="3">
          <span style='color: #bd2c00' v-show="editStaffInfo.registerState === '正常'">*</span>
          <span style='font-size: medium'>手机号：</span>
        </el-col>
        <el-col :span="7" style='display: flex!important;justify-content: left'>
          <el-input v-model="editStaffInfo.phoneNumber">
          </el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editStaff">确定</el-button>
        <el-button @click="editStaffDialogVisible = false">返回</el-button>
      </span>
    </el-dialog>
    <!-- 修改继承人金额对话框 -->
    <el-dialog title="修改继承人金额" :visible.sync="editHeritorAmountDialogVisible" width="35%">
      <el-row style='display: flex!important;align-items: center!important;margin-top: 20px;' :gutter="20">
        <el-col :span="10" style='font-size: medium'>
          <span style='color: #bd2c00'>*</span>
          <span> 继承人姓名：</span>
          <span>{{editHeritorAmountInfo.name}}</span>
        </el-col>
      </el-row>
      <el-row style='display: flex!important;align-items: center!important;margin-top: 20px;' :gutter="20">
        <el-col :span="5">
          <span style='color: #bd2c00'>*</span>
          <span style='font-size: medium'> 领取金额：</span>
        </el-col>
        <el-col :span="7" style='display: flex!important;justify-content: left'>
          <el-input v-model="editHeritorAmountInfo.realBroughtAmount">
          </el-input>
        </el-col>
      </el-row>
      <el-row style='display: flex!important;align-items: center!important;margin-top: 20px;' :gutter="20">
        <el-col :span="5">
          <span style='color: #bd2c00'>*</span>
          <span style='font-size: medium'> 预补金额：</span>
        </el-col>
        <el-col :span="7" style='display: flex!important;justify-content: left'>
          <el-input v-model="editHeritorAmountInfo.preFillingAmount">
          </el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editHeritorAmount">确定</el-button>
        <el-button @click="editHeritorAmountDialogVisible = false">返回</el-button>
      </span>
    </el-dialog>
    <!-- 录入继承人对话框 -->
    <el-dialog title="继承人信息录入" :visible.sync="addInheritorDialogVisible" width="70%">
      <el-row>
        <el-col :span="3">
          <div style='font-weight: bold; font-size: 16px'>
            职工信息
          </div>
        </el-col>
      </el-row>

      <el-row style='margin-top: 10px;'>
        <el-col :span="5" style="color: #3F5DC9; font-size: 14px; font-weight: 550; margin-left: 20px">
          职工姓名：{{staff.name}}
        </el-col>
        <el-col :span="10" style="color: #3F5DC9; font-size: 14px; font-weight: 550">
          职工身份证号：{{staff.idNumber}}
        </el-col>
      </el-row>

      <el-row style='margin-top: 10px;display: flex;align-items: center'>
        <el-col :span="22">
          <div style='font-weight: bold; font-size: 16px'>
            当前职工的继承人
          </div>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="addInheritorToListDialog()" size="small">添加继承人</el-button>
        </el-col>
      </el-row>

      <el-table :data="inheritorList" border stripe :header-cell-style="{background:'#eee',color:'#606266'}">
        <!-- 索引列 -->
        <el-table-column label="序号" type="index" width="70px"></el-table-column>
        <el-table-column label="继承人姓名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="sex" width='80px'></el-table-column>
        <el-table-column label="身份证号" prop="idNumber"></el-table-column>
        <el-table-column label="手机号码" prop="phoneNumber"></el-table-column>
        <el-table-column label="银行卡号" prop="cardNumber"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" size="mini" @click="editInheritorDialog(scope.row)">修改</el-button>
            <el-button type="text" icon="el-icon-delete" size="mini" @click.native.prevent="deleteInheritor(scope.row)">删除</el-button>
            <el-button type="text" icon="el-icon-delete" size="mini" @click.native.prevent="inheritorGetAllowance(scope.$index,scope.row)">领取补贴</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row style='margin-top: 10px;display: flex;align-items: center'>
        <el-col :span="22">
          <div style='font-weight: bold; font-size: 16px'>
            当前补贴已发放的的继承人
          </div>
        </el-col>
      </el-row>

      <el-table :data="inheritorChoosedList" border stripe  :header-cell-style="{background:'#eee',color:'#606266'}">
        <!-- 索引列 -->
        <el-table-column label="序号" type="index" width="70px"></el-table-column>
        <el-table-column label="继承人姓名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="sex" width="80px"></el-table-column>
        <el-table-column label="身份证号" prop="idNumber"></el-table-column>
        <el-table-column label="联系电话" prop="phoneNumber"></el-table-column>
        <el-table-column label="银行卡号" prop="cardNumber"></el-table-column>
        <el-table-column label="领取金额(元)" prop="realBroughtAmount"></el-table-column>
        <el-table-column label="预补金额(元)" prop="preFillingAmount"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="修改领取金额" placement="top">
              <el-button type="primary" size="mini" circle @click.native.prevent="setInheritorAmount(scope.$index,scope.row)">￥</el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="移除该继承人" placement="top">
              <el-button  @click="removeChoosedInheritor(scope.$index)" type="danger" icon="el-icon-delete" size="mini"  circle></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="修改信息与上传材料" placement="top">
              <el-button  @click="editInheritorDialog(scope.row)" type="warning" icon="el-icon-edit-outline" size="mini"  circle></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commitInheritorRealBroughtAmount">提交</el-button>
        <el-button @click="addInheritorDialogVisible = false">返回</el-button>
      </span>
    </el-dialog>

    <!-- 修改继承人对话框 -->
    <el-dialog title="修改继承人" :visible.sync="editInheritorDialogVisible" width="70%" @close="editInheritorDialogClosed">
      <el-row :gutter='60'>
        <el-col :span="13">
          <div style='font-weight: bold; margin-bottom: 10px'>
            职工信息
          </div>
          <el-row>
            <span  style="color: #3F5DC9; font-size: 14px; font-weight: 550; margin-left: 20px; ">
              职工姓名：{{staff.name}}
            </span>
            <span style="color: #3F5DC9; font-size: 14px; font-weight: 550; margin-left: 20px">
              职工身份证号：{{staff.idNumber}}
            </span>
          </el-row>
          <div style='font-weight: bold;margin-top: 10px;'>
            继承人信息
          </div>
          <el-row>
            <el-form label-position="left" label-width="90px" ref="editInheritorFormRef" :model="editInheritor" :rules="inheritorFormRules">
              <el-form-item label="继承人姓名">
                <el-input v-model="editInheritor.name"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio v-model="editInheritor.sex" label='男'>男</el-radio>
                <el-radio v-model="editInheritor.sex" label='女'>女</el-radio>
              </el-form-item>
              <el-form-item label="身份证号"  prop="idNumber">
                <el-input v-model="editInheritor.idNumber"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="phoneNumber">
                <el-input v-model="editInheritor.phoneNumber"></el-input>
              </el-form-item>
              <el-form-item label="银行卡号">
                <el-input v-model="editInheritor.cardNumber"></el-input>
              </el-form-item>
            </el-form>
          </el-row>
        </el-col>
        <el-col :span="11">
          <el-row :gutter="15">
            <el-row>
            <div style='font-weight: bold'>
              上传继承人公证材料：
            </div>
            </el-row>
            <el-row
              :index="item.ImUUid + ''" v-for="(item,indexnum) in importListInfo.Imports" :key="item.ImUUid">
              <el-row type="flex" justify='start'>
                <!-- 查看示例的预览图片 -->
                <el-button style='height: 32px;margin-top: 30px;margin-right: 15px' size="small" type="primary" @click="showPrePic(item)">查看示例</el-button>
                <el-upload
                style='margin-top: 30px'
                action=""
                list-type='text'
                class="avatar-demo"
                :on-change='(file, fileList) => {onEditChange(file, fileList, indexnum)}'
                :on-remove='(file, fileList) => {onEditChange(file, fileList, indexnum)}'
                :before-remove="beforeRemove"
                :file-list="file"
                :limit="item.PageNum === 1? 1 : 99999"
                multiple
                :auto-upload="false">
                  <el-button :disabled="item.PageNum === 1 && buttonController[indexnum]" slot="trigger" size="small" type="success">点击选择{{item.ImportName}}文件</el-button>
                  <el-button :disabled="item.PageNum === 1 && buttonController[indexnum]" style="margin-left: 10px;" size="small" type="danger" @click="uploadInheritorfile(importListInfo.Busiid,importListInfo.ChannelCode,item.ImUUid,importListInfo.SeviceCode,indexnum)">上传到服务器</el-button>
                <span style='color: red; margin-left: 10px;' v-if="item.IsReq==1">*必须上传 </span>
                </el-upload>
              </el-row>
              <!-- 图片预览 -->
              <el-row >
                <div v-if="imgUrl.length !== 0">
                  <div v-for="item in imgUrl[indexnum]">
                    <img class="hoverImg" style="width: 100px; height: 100px; margin-right:10px;object-fit: contain"
                         :src="item.url" @click="handlePictureCardPreview(item.url)" title="点击放大图片"/>
                    <el-button slot="trigger" size="small" type="danger" @click="delectInheritorImg(item.imageId, item.filename)">删除图片</el-button>
                  </div>
                </div>
              </el-row>
            </el-row>
          </el-row>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editInheritorBtn">确定</el-button>
          <el-button @click="editInheritorDialogVisible = false">返回</el-button>
      </span>
    </el-dialog>

    <!-- 添加继承人的对话框 -->
    <el-dialog title="添加继承人" :visible.sync="addInheritorToListDialogVisible" width="70%" @close="addInheritorToListDialogClosed">
      <el-row :gutter='60'>
        <el-col :span="12">
          <div style='font-weight: bold'>
            职工信息
          </div>
          <div style='margin-top: 4px;'>
            职工姓名：{{staff.name}}
          </div>
          <div style='margin-top: 4px;'>
            职工身份证号：{{staff.idNumber}}
          </div>

          <div style='font-weight: bold;margin-top: 10px;'>
            继承人信息
          </div>
          <el-row>
            <el-form label-position="left" label-width="90px" ref="addInheritorFormRef" :model="inheritor" :rules="inheritorFormRules">
              <el-form-item label="继承人姓名">
                <el-input v-model="inheritor.name"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="idNumber">
                <el-input v-model="inheritor.idNumber"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio v-model="inheritor.sex" label='男'>男</el-radio>
                <el-radio v-model="inheritor.sex" label='女'>女</el-radio>
              </el-form-item>
              <el-form-item label="联系电话" prop="phoneNumber">
                <el-input v-model="inheritor.phoneNumber"></el-input>
              </el-form-item>
              <el-form-item label="银行卡号">
                <el-input v-model="inheritor.cardNumber"></el-input>
              </el-form-item>
            </el-form>
          </el-row>
        </el-col>
        <el-col :span="12">
          <div style='font-weight: bold; margin-bottom: 15px'>
            上传继承人公证材料：
          </div>
          <span style="color: red;font-size: 14px;">tip1:&nbsp;添加继承人阶段，禁止上传材料</span><br>
          <span style="display:flex; color: red;font-size: 14px; margin-bottom: 10px">tip2:&nbsp;如需上传材料，在添加成功后，通过编辑功能上传</span>
          <el-upload
            class="upload-demo"
            action=""
            :before-remove="beforeRemove"
            :on-change='onChange'
            :file-list="file"
            disabled
            :auto-upload="false">
            <el-button size="small" type="primary" disabled>点击上传</el-button>
          </el-upload>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInheritorToList">确定</el-button>
          <el-button @click="addInheritorToListDialogVisible = false">返回</el-button>
      </span>
    </el-dialog>

    <!-- 职工Excel导入的对话框 -->
    <el-dialog title="导入Excel文件" :visible.sync="uploadExcelDialogVisible" width="50%">
      <div class='excelTop'>
        <el-alert title="重要提示：请上传模板格式的文件，如若您没有模板，请先下载-->" type="warning" show-icon :closable="false">
          <a :href="excelAddress" target='_blank'>点此下载模板</a>
        </el-alert>
      </div>

      <el-row>
        <el-col :span="3">
          <div style='font-weight: bold'>
            选择文件
          </div>
        </el-col>
      </el-row>

      <el-upload
        ref='excelUpload'
        style='margin-top: 10px;'
        class="upload-demo"
        drag
        :limit='1'
        :on-exceed='exceed'
        :before-remove='beforeRemove'
        :on-remove='excelRemove'
        action=""
        :on-change='onExcelChange'
        :file-list='excelFile'
        :auto-upload='false'
        >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>

      <el-row style='margin-top: 10px;'>
        <el-col :span="3">
          <div style='font-weight: bold'>
            Excel预览
          </div>
        </el-col>
      </el-row>
      <el-table class="listTable_ele"  v-show="excelListTable.length != 0" :data="excelListTable" stripe height="250" style="width:100%">
        <el-table-column prop="sfzhm" label="职工身份证号码" width="200" align="center"></el-table-column>
        <el-table-column prop="zgxm" label="职工姓名" width="200" align="center"></el-table-column>
        <el-table-column prop="jhcxkkh" label="建行储蓄卡卡号" width="200" align="center"></el-table-column>
        <el-table-column prop="slzfbtje" label="申领住房补贴金额(元)" width="200" align="center"></el-table-column>
        <el-table-column prop="sjhm" label="手机号码" width="200" align="center"></el-table-column>
        <el-table-column prop="jcrsfzhm" label="继承人身份证号码" width="200" align="center"></el-table-column>
        <el-table-column prop="jcrxm" label="继承人姓名" width="200" align="center"></el-table-column>
        <el-table-column prop="yzbtje" label="预支补贴金额(元)" width="200" align="center"></el-table-column>

      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadExcel" :loading="excelLoading">提交</el-button>
          <el-button @click="uploadExcelDialogVisible = false">返回</el-button>
      </span>
    </el-dialog>

    <!--  公证材料图片放大查看弹框  -->
    <el-dialog :visible.sync="imgdialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <!-- 继承人材料示例图片预览 -->
    <div class='prePic' v-show="isShowPrePic" >
      <!-- require里用str -->
      <img :src="prePicUrl" v-imgerror="require('@/assets/images/noPrePic.png')" @click="isShowPrePic = false">
    </div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
import SubsidesFile from './components/SubsidesFile'
import toBlob from '@/utils/toblob'
export default {
  components: {
    SubsidesFile
  },
  data() {
    return {
      // 预加载效果
      preloading: false,
      // 文件地址
      excelAddress: '',
      //单位账号
      gjjzh: '',
      baseInfo: {},
      // 所有角色列表数据
      statisticslist: [{
        zbwzje: 0,
        zbwsyzje: 0,
        yxzgffje: 0
      }],
      indicatorlist: [],
      stafflist: [],
      // 控制选择对话框的显示与隐藏
      setChooseDialogVisible: false,
      // 控制添加职工对话框的显示与隐藏
      chooseStaffDialogVisible: false,
      addStaffDialogVisible: false,
      editStaffDialogVisible: false,
      uploadExcelDialogVisible: false,
      addInheritorDialogVisible: false,
      editInheritorDialogVisible: false,
      addInheritorToListDialogVisible: false,
      editHeritorAmountDialogVisible: false,
      // 可选择的数据
      chooseList: [],
      excelFile: [],
      excelListTable: [],
      excelamountList: [],
      excelPreFillingList: [],
      excelEmployeeList: [],
      //录入职工列表
      addStaffList: [],
      //编辑职工金额
      editStaffInfo: {
        index: null,
        employeeId: '',
        name: '',
        amount: 0,
        preFillingAmount: 0
      },
      // 编辑继承人金额对象
      editHeritorAmountInfo: {
        index: null,
        name: '',
        realBroughtAmount: 0,
        preFillingAmount: 0
      },
      editHeritorAmountInfoList: [],
      staff: {},
      addStaff: {
        // birthday: '',
        cardNumber: '',
        // cardPassword: '',
        gjjzh: '',
        idNumber: '',
        name: '',
        phoneNumber: '',
        sex: '',
        registerState: '正常'
      },
      inheritorFormRules: {
        idNumber: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证格式异常，请修改', trigger: 'blur'}
        ],
        phoneNumber: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '手机号格式异常，请修改', trigger: 'blur'}
        ],
      },
      addStaffFormRules: {
        // 验证职工信息是否合法
        name: [
          { required: true, message: '请输入职工名称', trigger: 'blur' },
        ],
        sex: [ { required: true, message: '请选择职工性别', trigger: 'blur'} ],
        cardNumber: [
          { required: true, message: '请输入银行卡号', trigger: 'blur' },
        ],
        // cardPassword: [
        //   { required: true, message: '请输入银行卡密码', trigger: 'blur' },
        // ],
        idNumber: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证格式异常，请修改',trigger: 'blur'}
        ],
        phoneNumber: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '手机号格式异常，请修改',trigger: 'blur'}
        ],
        gjjzh: [
          { required: true, message: '请输入所属单位ID', trigger: 'change' },
        ]
      },
      inheritorList: [],
      inheritorChoosedList: [],
      // 修改的继承人基本信息对象
      editInheritor: {},
      // 田间的继承人信息对象
      inheritor: {
        name: '',
        idNumber: '',
        phoneNumber: '',
        cardNumber: '',
        realBroughtAmount: '',
        sex: ''
      },
      // 默认选中的节点Id值数组
      defKeys: [],
      // 当前即将分配权限的角色id
      roleId: '',
      chooseListInfo: {
        // dwmc: '',
        // mhDwmc: '',
        zjly: null,
        currentZbwhList: [],
        // 当前的页数
        pageNum: 1,
        // 当前每页显示多少条数据
        pageSize: 5,
        // 表格总行数
        total: 0,
        onlyHaveBalance:false
      },
      //录入职工时用于筛选职工的信息
      addStaffListInfo: {
        name: '',
        // 当前的页数
        pageNum: 1,
        // 当前每页显示多少条数据
        // 选中员工的id列表
        currentEmployeeIdList: [],
        pageSize: 5,
        // 表格总行数
        total: 0
      },
      excelListInfo: {
        // 当前的页数
        pageNum: 1,
        // 当前每页显示多少条数据
        pageSize: 5,
        // 表格总行数
        total: 0
      },
      institutionNames: [],
      fundingSources: [],
      multipleChooseSelection: [],
      // 选择员工时，选中的员工
      multipleStaffSelection: [],
      file: [],
      file1: [],
      // 继承人公证材料列表
      file1List: [],
      formLabelAlign: {},
      // 指标文状态列表
      indexTextStateList: [],
      // 职工状态列表
      employeeStateList: [],
      // 继承人需要上传的材料信息
      importListInfo:{
        BusiName:'',
        // 业务编码
        Busiid:'',
        // 渠道编码
        ChannelCode:'',
        // 服务编码
        SeviceCode:'',
        // 需要上传的材料列表
        Imports: []
      },
      // 继承人上传材料的图片信息
      uploadImgInfo:[{
        imageId:'',
        filename:'',
        type:'',
        file:''
      }],
      imgUrl: [], // 材料图片信息，其中imgeUrl[0] = [{},{},{}]
      // 继承人上传材料的图片流
      item:[],
      // 上传按钮是否禁用
      buttonController:[],
      // 上传excel文件时候提交按钮的加载状态
      excelLoading: false,
      // 自己测一下预览
      imgdialogVisible: false,
      dialogImageUrl: '',
      // 职工在册状态级联选择器内容
      registerStateOptions: [
        {
          value: '正常',
          label: '正常'
        },
        {
          value: '死亡',
          label: '死亡'
        }
      ],
      showAllFiles: false, // 补贴文件switch开关控制
      isShowPrePic: false, // 继承人材料示例图片预览
      prePicUrl: '', // 继承人材料示例图片地址
    }
  },
  computed: {
    // differAmount: function(){
    //   let currentAmount = 0
    //   this.stafflist.forEach(obj => {
    //     currentAmount += obj.amount
    //   })
    //   return this.statisticslist[0].zbwzje - this.statisticslist[0].ffzje - currentAmount
    // }
  },
  watch: {
    editStaffInfo: {
      deep: true,
      handler: newVal => {
        if (newVal.registerState === '死亡') {
          // 职工在册状态为死亡时，禁止修改切预补金额设置为0
          newVal.preFillingAmount = 0
        }
      }
    }
  },
  async created() {
    this.preloading = true
    // 获取基地址，拼接文件地址
    this.excelAddress = this.$http.defaults.baseURL + '/employee/downloadExcelTemplate'
    this.gjjzh = window.sessionStorage.getItem('gjjzh')
    // this.chooseListInfo.dwmc = window.sessionStorage.getItem('dwmc');
    await this.getAllowanceInfo()
    setTimeout(() => {
      this.preloading = false
    },1000)
  },
  methods: {
    // 获取标记状态列表
    getStateList(allowanceId) {
      this.$http.get('/allowance/getAllowanceDetail',{params:{
          allowanceId: allowanceId
        }},{ emulateJSON:true}).then( res => {
        let i
        const { data } = res
        console.log('---')
        console.log(data)
        if (data.code !== 200) {
          return this.$message.error('获取补贴详细信息失败！')
        } else {
          // 指标文和职工标红状态列表
          this.indexTextStateList = data.data.zbwhStateList
          this.employeeStateList = data.data.employeeStateList
        }
      })
    },
    //获得指标文，职工等基本信息
    async getAllowanceInfo() {
      this.stafflist = []
      const {data:{data: res}} = await this.$http.get('allowance/currentAllowance', {params: {gjjzh: this.gjjzh}})
      console.log('含预补金额的全部信息', res)
      this.baseInfo = res
      // console.log('hello',res,res.employeeList)
      for (let i=0; i<res.employeeList.length; i++){
        const {data:{data: staff}} = await this.$http.get('employee/findByIdAndGjjzh',
          {params: {employeeId: res.employeeList[i], gjjzh: this.gjjzh}})
        this.stafflist.push({
          index: i,
          employeeId: res.employeeList[i],
          name: staff.name,
          registerState: staff.registerState,
          idNumber: staff.idNumber,
          amount: res.amountList[i],
          preFillingAmount: res.preFillingAmountList[i],
          cardNumber: staff.cardNumber
        })
      }
      console.log('基本信息',res)
      for (let i=0; i<res.zbwhList.length; i++){
        const { data: {data: zbw} } = await this.$http.get('zbwmx/findByZbwhAndGjjzh',
          {params: {gjjzh: this.gjjzh, zbwh: res.zbwhList[i]}})
        this.indicatorlist.push({
          index: i,
          zbwh: zbw.zbwh,
          dwmc: zbw.dwmc,
          hjje: zbw.hjje,
          hjybje: zbw.hjybje,
          zjly: zbw.zjly,
          syje: zbw.syje,
          tkje: zbw.tkje,
          ybje: zbw.ybje
        })
      }
      this.getSatisticslist()
      this.getStateList(this.baseInfo.allowanceId)
    },
    //计算统计信息
    getSatisticslist() {
      let zbwzje = 0
      let ffzje = 0
      let yxzgffje = 0
      let ybzje = 0
      let tkzje = 0
      // 1. 防止浮点数运算错误，统一扩大100倍做整数计算，对最后的结果再除以100
      this.indicatorlist.forEach(item =>{
        zbwzje += (item.hjje * 100)
        ffzje += (item.hjybje * 100)
        ybzje += (item.ybje * 100)
        tkzje += (item.tkje * 100)
      })
      this.stafflist.forEach(item =>{
        yxzgffje += (item.amount * 100)
      })
      // 2. 将显示的结果除以100正常显示出来
      console.log(zbwzje, ffzje)
      this.statisticslist[0].zbwzje = zbwzje / 100
      this.statisticslist[0].zbwsyzje = (zbwzje - ffzje - ybzje - tkzje) / 100
      this.statisticslist[0].yxzgffje = yxzgffje / 100
    },
    // 选择指标文
    async chooseIndicatorDialog() {
      this.getChooseList()
      this.getFundingSources()
      this.getInstitutionNames()
      this.setChooseDialogVisible = true
    },
    //获得单位名称
    async getInstitutionNames() {
      const {data:{data:res}} = await this.$http.get('/zbwmx/getAllDwdjxx')
      this.institutionNames = res
    },
    //获得资金来源
    async getFundingSources() {
      const {data:{data:res}} = await this.$http.get('/zbwmx/getAllZjly')
      this.fundingSources = res
    },
    //获得指标文
    async getChooseList() {

     this.chooseListInfo.currentZbwhList = []
      this.indicatorlist.forEach(item => {
        this.chooseListInfo.currentZbwhList.push(item.zbwh)
    })
      // 请求的指标文选择信息，添加上对应的单位账号，只看当前单位下的账号
      this.chooseListInfo.gjjzh = this.gjjzh
      const {data:{data:res}} = await this.$http.post('/zbwmx/findZbwmx', this.chooseListInfo)
      this.chooseList = res.records
      this.chooseListInfo.total = res.total
    },
    //获得员工
    async getStaffList() {
      // console.log('职工录入开',this.multipleStaffSelection)
      this.addStaffListInfo.currentEmployeeIdList = []
      this.stafflist.forEach(item => {
        console.log(item)
        this.addStaffListInfo.currentEmployeeIdList.push(item.employeeId)
      })
      console.log(this.addStaffListInfo.currentEmployeeIdList)
      // 只查本单位的员工
      this.addStaffListInfo.gjjzh = this.gjjzh
      console.log(this.addStaffListInfo)
      const {data:{data:res}} = await this.$http.post('/employee/findEmployeeList',  this.addStaffListInfo)
      this.addStaffList = res.records

      this.addStaffList.forEach(obj => {obj.amount = 0})
      this.addStaffListInfo.total = res.total
    },
    // 上传excel文件
    async getExcelList() {

    },
    // 根据Id删除对应的权限 好像没用
    async removeRightById(role, rightId) {
      // 弹框提示用户是否要删除
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('取消了删除！')
      }

      const { data: res } = await this.$http.delete(
        `roles/${role.id}/rights/${rightId}`
      )

      if (res.meta.status !== 200) {
        return this.$message.error('删除权限失败！')
      }

      // this.getRolesList()
      role.children = res.data
    },
    //获得职员所有继承人
    async getInheritorList(allowanceId, employeeId) {
      this.staff.inheritorList = []
      // 获取该继承人本次已经发放钱的继承人列表（包含这个继承人本次已经领取的钱）
      const { data: res2 } = await this.$http.get(`/inheritor/recordDetail/${allowanceId}/${employeeId}`)
      this.inheritorChoosedList = res2.data
      // 获取该员工所有的继承人
      const { data: res } = await this.$http.get(`/inheritor/employeeId/${employeeId}`)
      if (res === undefined) {
        return this.$message.error('获取继承人列表失败！')
      }
      this.inheritorList = res.data
      // 增加自定义属性领取金额，初始值均为0
      this.inheritorList.forEach(item => {
        item.realBroughtAmount = 0
      })
      // 去重操作，将已发放钱的从全部继承人数组中移除
      if (this.inheritorChoosedList.length !== 0) {
        console.log('----')
        console.log(this.inheritorChoosedList)
        for (let i = this.inheritorList.length - 1; i >= 0; i--) {
          for (let j = 0; j < this.inheritorChoosedList.length; j++) {
            if (this.inheritorChoosedList[j].inheritorId === this.inheritorList[i].inheritorId) {
              this.inheritorList.splice(i,1)
              break
            }
          }
        }
      }
    },
    //删除指标文
    async deleteIndicator(index, rows) {
      console.log('start',this.inheritorList)
      const confirmResult = await this.$confirm(
        '此操作将永久删除该指标文, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult === 'confirm') {
         rows.splice(index, 1);
         this.$message.success('已经成功删除！')
      }else if (confirmResult !== 'confirm') {
         this.$message.info('已经取消删除！')
      }
      this.getSatisticslist()
    },
    //删除员工
    async deleteStaff(index, rows) {
      const confirmResult = await this.$confirm(
        '此操作将移除该职工, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult === 'confirm') {
        rows.splice(index, 1);
        this.getSatisticslist()
        return this.$message.success('已经成功删除！')
      }else if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除！')
      }
    },
    //确定添加指标文
    chooseIndicator() {
      // 选择剩余金额为0的指标文禁止添加
      const syjeIsZero = this.multipleChooseSelection.some(item => {
        return item.syje === 0
      })
     if (syjeIsZero) return this.$message.warning('只允许选择剩余金额大于0的指标文！')
      console.log(...this.multipleChooseSelection)
      this.indicatorlist.push(...this.multipleChooseSelection)
      this.getSatisticslist()
      this.setChooseDialogVisible = false
    },
    handleSelectionChange(val) {
      this.multipleChooseSelection = val
    },
    // 职工信息录入对话框关闭
    chooseStaffDialogClosed() {
      // 清空职工姓名
      this.addStaffListInfo.name = ''
    },
    //确定添加职工
    async chooseStaffs() {
      console.log('选中员工', this.multipleStaffSelection)
      this.stafflist.push(...this.multipleStaffSelection)
      const { data: res } = await this.$http.post('/employee/syncZgdjxxToEmployeeAndGetEmployeeId', this.multipleStaffSelection)
      if ( res.code !== 200 ) return this.$message.error('内网同步失败！')

      // 职工录入列表中，这些员工初始在内网都是没有id的，当这些员工被加入到职工录入表中提交到后端，后端会返回在外网的id
      // 对于employeeId为null的员工，需要在前端将的id赋值，防止打开选择员工对话框时候的去重操作向后端提交的员工id为null
      console.log('新id',res.data,res)
      // 后端返回的选中员工的数组，包含员工id
      const chooedObj = res.data
      // 遍历页面中的选择的员工数组，根据身份证唯一性，去进行赋值操作
      this.stafflist.forEach(item => {
        // 没有id的员工，才有必要去赋值
        if (!item.employeeId) {
          chooedObj.some(employee => {
            // 根据身份证找到这个员工，并且将员工id赋值
            if (employee.idNumber === item.idNumber) {
              item.employeeId = employee.employeeId
              // 利用some唯一性查找，退出遍历，提高效率
              return true
            }
          })
        }
      })
      // 解决element-ui插件最后一页的bug
      this.computeTheEnd(this.addStaffListInfo.pageNum)
      this.getSatisticslist()
      this.chooseStaffDialogVisible = false
    },
    async addStaffToList() {
      // 表单校验
      this.$refs.addStaffFormRef.validate((bool) => {
        if (!bool) {
          // 规则校验未通过
          return this.$message.error('信息校验未通过')
        } else {
          // 校验通过，逻辑处理

          // 手录员工，是存到外网，后端不会判断已存在只会覆盖旧的，因此前端自己根据身份证唯一性做去重处理
          if (this.stafflist.length !== 0) {
            const duplicateFlag = this.stafflist.some( staff => {
              // 已经录入过该身份证号的员工，返回true表示已存在
              return staff.idNumber === this.addStaff.idNumber
            })
            if (duplicateFlag) return this.$message.warning('禁止重复录入！')
          }

          let that = this
          console.log('-----')
          console.log(this.addStaff)
          this.$http.post('/employee/insertSelective',
            {
              // birthday:this.addStaff.birthday,
              cardNumber:this.addStaff.cardNumber,
              // cardPassword:this.addStaff.cardPassword,
              gjjzh:this.gjjzh,
              idNumber:this.addStaff.idNumber,
              name:this.addStaff.name,
              registerState: this.addStaff.registerState,
              phoneNumber:this.addStaff.phoneNumber,
              sex:this.addStaff.sex
            }, {emulateJSON:true})
            .then(res => {
              console.log(res)
              if (res.data.code !== 200) {
                return that.$message.error(res.data.msg)
              } else{
                // 手录员工对象添加自定义属性amount
                res.data.data.amount = 0
                // 手录员工对象添加自定义属性preFillingAmount
                res.data.data.preFillingAmount = 0
                const obj = res.data.data
                that.stafflist.push(obj)
                that.$message.success('添加职工成功')
              }
            })
          this.addStaffDialogVisible = false
        }
      })

    },
    // 监听添加员工对话框关闭事件，清空校验规则
    addStaffDialogClosed() {
      this.$refs.addStaffFormRef.resetFields()
    },
    handleStaffSelectionChange(val) {
      this.multipleStaffSelection = val
    },
    //指标分页页码改变
    handleChooseCurrentChange(newPage) {
      this.chooseListInfo.pageNum = newPage
      this.getChooseList()
    },
    //指标文分页大小改变
    handleChooseSizeChange(pageSize) {
      this.chooseListInfo.pageSize = pageSize
      this.getChooseList()
    },
    //职工分页页码改变
    handleStaffCurrentChange(newPage){
      this.addStaffListInfo.pageNum = newPage
      this.getStaffList()
    },
    //职工分页大小改变
    handleStaffSizeChange(pageSize){
      this.addStaffListInfo.pageSize = pageSize
      this.getStaffList()
    },
    chooseStaffDialog() {
      this.getStaffList()
      this.chooseStaffDialogVisible = true
    },
    addStaffDialog() {
      this.addStaffDialogVisible = true
    },
    editStaffDialog(index,staff) {
      this.editStaffInfo = {
        index,
        employeeId: staff.employeeId,
        name: staff.name,
        amount: staff.amount,
        idNumber: staff.idNumber,
        phoneNumber: staff.phoneNumber,
        cardNumber: staff.cardNumber,
        registerState: staff.registerState,
        preFillingAmount: staff.preFillingAmount
      }
      this.editStaffDialogVisible = true
    },
    //编辑职员
    async editStaff() {
      console.log('enter')
      // 这里没用表单，只进行姓名 在册状态 银行卡号 手机号提交
      // 1.名字判断
      if (!this.editStaffInfo.name) return this.$message.warning('名字不能为空')
      console.log('name')
      // 2. 在册状态判断(现在是用的级联选择器，这里的判断无所谓了)
      if (this.editStaffInfo.registerState !== '正常' && this.editStaffInfo.registerState !== '死亡') {
        return this.$message.warning('在册状态必须设置为正常或死亡')
      }
      console.log('registerState')
      // 3. 银行卡号 (当在册状态为正常时，不允许为空，死亡则允许为空)
      if (this.editStaffInfo.registerState === '正常' && !this.editStaffInfo.cardNumber) return this.$message.warning('银行卡号不能为空')
      console.log('cardNumber')
      // 4. 手机号,正常状态不允许为空需要判断格式，死亡状态下，允许为空
      const phoneNumberBool = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.editStaffInfo.phoneNumber)
      if (this.editStaffInfo.registerState === '正常') {
        if (!phoneNumberBool) return this.$message.warning('检查手机号格式')
      } else {
        // 死亡状态，手机号不为空且格式错误，则需要校验格式
        if (this.editStaffInfo.phoneNumber && !phoneNumberBool) return this.$message.warning('检查手机号格式')
      }
      console.log('mobile')
      // 5.金额输入不规范直接退出
      const amountBool = /^([1-9]\d{0,9}|0)(\.\d{1,2})?$/.test(this.editStaffInfo.amount)
      if (!amountBool) return this.$message.warning('补贴金额未设置有效值')
      const preFillingAmountBool = /^([1-9]\d{0,9}|0)(\.\d{1,2})?$/.test(this.editStaffInfo.preFillingAmount)
      if (!preFillingAmountBool) return this.$message.warning('预补金额未设置有效值')
      let currentAmount = 0
      this.stafflist.forEach((obj,i) => {
        if ( i === this.editStaffInfo.index) {
          currentAmount += (this.editStaffInfo.amount - 0)
        }else{
          currentAmount += (obj.amount - 0)
        }
      })
      if (this.editStaffInfo.amount === '') {
        return this.$message.error('补贴金额不能为空！')
      }
      if (currentAmount > this.statisticslist[0].zbwsyzje) {
        return this.$message.error('补贴金额不能大于剩余金额')
      }
      // 需要转换为数字类型再比较，不然字符串比较大小会出现 '5' > '10' 为true的情况，比较的是5和1的ascii值
      if (parseFloat(this.editStaffInfo.preFillingAmount) > parseFloat(this.editStaffInfo.amount)) {
        return this.$message.error('预补金额不能超过补贴金额')
      }

      // 只传姓名，手机号，银行卡号 在册状态到后端去
      const { data: res} = await this.$http.put('/employee', this.editStaffInfo)
      if (res.code !== 200) return this.$message.warning(res.msg)

      // 同时更新编辑的这个员工的最新信息到职工录入表中的对应数据中
      this.stafflist.forEach(item => {
        if (item.employeeId === this.editStaffInfo.employeeId){
          item.amount = this.editStaffInfo.amount
          item.preFillingAmount = this.editStaffInfo.preFillingAmount
          item.name = this.editStaffInfo.name
          item.phoneNumber = this.editStaffInfo.phoneNumber
          item.cardNumber = this.editStaffInfo.cardNumber
          item.registerState = this.editStaffInfo.registerState
        }
      })
      this.stafflist.push({})
      this.stafflist.pop()

      this.getSatisticslist()
      this.editStaffDialogVisible = false
    },
    uploadExcelDialog() {
      // this.getExcelList()
      this.uploadExcelDialogVisible = true
    },
    //录入继承人按钮点击事件。(获取需要上传的图片)
    async addInheritorDialog(staff) {
      this.staff = staff
      await this.getInheritorList(this.baseInfo.allowanceId, this.staff.employeeId)
      this.importListInfo = []
      let that = this
      this.$http.get('/inheritor/getImportList').then( res => {
          console.log(res.data)
          this.importListInfo = res.data.data
        }).catch((err) => {
          alert(err)
        }).finally(() => {
        that.addInheritorDialogVisible = true
      })
    },
    //弹出编辑继承人对话框
    async editInheritorDialog(inheritor) {
      this.addInheritorDialogVisible = false
      this.editInheritor = inheritor
      await this.getInheritorImportList()// 获取继承人需要上传的文件列表
      this.editInheritorDialogVisible = true
    },
    editInheritorDialogClosed() {
      this.editInheritorDialogVisible = false
      this.addInheritorDialogVisible = true
    },

    // 获取继承人需要上传的文件列表
    async getInheritorImportList(){
      this.imgUrl=[]
      // 获取继承人图片
      for (let i=0; i<this.importListInfo.Imports.length; i++){
        await this.getInheritorImage(this.importListInfo.Imports[i].ImUUid,i)
      }
    },
    //删除继承人
    async deleteInheritor(row) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该继承人, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult === 'confirm') {
        const { data:res } = await this.$http.delete('/inheritor/' + this.baseInfo.allowanceId + '/' + row.inheritorId)
        // this.getInheritorList(row.allowanceId, this.staff.employeeId)
        this.inheritorList.splice(row.$index, 1)
        if (res.code !== 200)   return this.$message.error('删除继承人失败！')
        return this.$message.success('删除继承人成功！')
      }else if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除！')
      }
    },
    addInheritorToListDialog() {
      this.addInheritorToListDialogVisible = true
      this.inheritor = {
        name: '',
        phone: '',
        id: '',
        card: '',
        subsidies: ''
      }
      this.addInheritorDialogVisible = false
    },
    addInheritorToListDialogClosed() {
      this.addInheritorToListDialogVisible = false
      this.addInheritorDialogVisible = true
    },
    // 上传继承人公证材料（单个/多个）
    async uploadInheritorfile(busiIds,channelCode,imUuid,seviceCode,index){
      if (this.file1List.length !== 0 && this.file1List[index].length !== 0){
        let fd = new FormData()
        var tempUploadfileInfo = JSON.stringify({
          allowanceId:this.baseInfo.allowanceId,
          busiIds:busiIds,
          channelCode:channelCode,
          employeeId:this.staff.employeeId,
          filename:this.file1List[index][0].name,
          gjjzh:this.gjjzh,
          imUuid:imUuid,
          inheritorId:this.editInheritor.inheritorId,
          seviceCode:seviceCode
        });
        fd.append('tempUploadfileInfo', new Blob([tempUploadfileInfo], {type: "application/json"}));
        fd.append('file', null)
        // alert(this.file1List[index].length)
        for (let i = 0; i < this.file1List[index].length; i++) {
          fd.set('file', this.file1List[index][i])
          const { data: {code} } = await this.$http.post('/inheritor/uploadMyFile', fd,{headers: {
              'Content-Type':'multipart/form-data'
            }})
          if (code === 200) {
            this.editInheritorDialogVisible = false
            this.editInheritorDialogVisible = true
            this.$message.success(this.file1List[index][i].name + '上传成功')
          }else{
            this.$message.error("上传失败！");
          }
        }
        this.getInheritorImportList()
      } else {
        this.$message.info('没有上传材料')
      }
    },
    // 获取继承人图片的接口
    async getInheritorImage(imUuid,index){
      await this.$http.get('/inheritor/fetchImage',{params: {
        allowanceId:this.baseInfo.allowanceId,
        employeeId:this.staff.employeeId,
        gjjzh: this.gjjzh,
        imUuid:imUuid,
        inheritorId:this.editInheritor.inheritorId
      }}).then((data)=>{
        // this.uploadImgInfo[index]也是一个数组
        this.uploadImgInfo[index]=data.data.data
        // console.log(this.uploadImgInfo[index])
        if(this.uploadImgInfo[index].length !== 0){
          // 每个材料可能包含多个文件图片信息
          this.imgUrl[index] = [] // 存放该材料对应的多个图片信息(地址、文件名、id)
          this.uploadImgInfo[index].forEach(item => {
            let blob = this.base64ImgtoFile(item.file, item.filename, item.type)
            let url = window.URL.createObjectURL(blob);  // 将他转化为路径
            let imgObj = { ...item, url } // 图片信息对象
            this.imgUrl[index].push(imgObj)
          })
          this.buttonController[index]=true
        }else{
          this.imgUrl = []
          this.buttonController[index]=false
        }
        console.log(this.buttonController)
      }).catch(() => {
        this.$message.error("获取继承人图片失败！");
        this.buttonController[index]=false
      });
    },
    base64ImgtoFile (dataurl, filename,type) {
      //将base64格式分割：['data:image/png;base64','XXXX']
      // const arr = dataurl.split(',')
      // .*？ 表示匹配任意字符到下一个符合条件的字符 刚好匹配到：
     // image/png
      const mime = 'image'+type//arr[0].match(/:(.*?);/)[1]  //image/png
      //[image,png] 获取图片类型后缀
      const bstr = atob(dataurl)   //atob() 方法用于解码使用 base-64 编码的字符串
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], `${filename}.${type}`, {
        type: mime
      })
    },

    imageToBase64 (file) {
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        console.log('file 转 base64结果：' + reader.result)
        return reader.result
        // this.iconBase64 = reader.result
      }
      reader.onerror = function (error) {
        console.log('Error: ', error)
      }
},
    // 删除继承人公证材料的图片
    async delectInheritorImg(imageId, filename){
      const confirmResult = await this.$confirm(
        '此操作将永久删除该公证材料, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult === 'confirm') {
        const { data: { code} } = await this.$http.delete('/inheritor/deleteImage',{params: {
            imageId,
            filename
        }})
        if(code === 200){
          await this.getInheritorImportList()
          this.editInheritorDialogVisible = false
          this.editInheritorDialogVisible = true
          this.$message.success('删除成功')
        }else{
          this.$message.error("删除失败！");
        }
      }

    },
    //编辑继承人
    editInheritorBtn() {
      this.$refs.editInheritorFormRef.validate(async (bool) => {
        if (!bool) {
          // 未通过校验
          this.$message.warning('修改内容格式异常，请重新输入')
        } else {
          // 修改继承人信息部分
          let inheritor = {
            cardNumber: this.editInheritor.cardNumber,
            phoneNumber: this.editInheritor.phoneNumber,
            idNumber: this.editInheritor.idNumber,
            inheritorId: this.editInheritor.inheritorId,
            name: this.editInheritor.name,
            sex: this.editInheritor.sex,
          }
          const { data:res } = await this.$http.put('/inheritor', inheritor)
          if (res.code !== 200) {
            this.file = []
            this.file1 = []
            this.file1List = []
            return this.$message.error('继承人信息更新失败')
          }
          this.getInheritorList(this.baseInfo.allowanceId, this.staff.employeeId)
          this.file = []
          this.file1 = []
          this.file1List = []
          this.imgUrl=[]
          this.editInheritorDialogClosed()
          return this.$message.success('继承人信息修改成功！')
        }
      })
    },
    //添加继承人
     addInheritorToList() {
      this.$refs.addInheritorFormRef.validate(async (bool) => {
        if (!bool) {
          // 未通过校验
          return this.$message.warning('检查信息录入是否合法')
        } else {
          let inheritor = {
            cardNumber: this.inheritor.cardNumber,
            idNumber: this.inheritor.idNumber,
            name: this.inheritor.name,
            phoneNumber: this.inheritor.phoneNumber,
            sex: this.inheritor.sex,
          }
          const {data} = await this.$http.post(`/inheritor/${this.staff.employeeId}`, inheritor)
          if (data.code !== 200) {
            this.$message.warning(data.msg + '，检查后重新输入')
          } else {
            this.getInheritorList(this.baseInfo.allowanceId, this.staff.employeeId)
            this.addInheritorToListDialogClosed()
            this.$message.success('添加成功！')
          }
        }
      })
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    async onChange (file) {
      this.file = file
    },
    async onEditChange (file,fileList,index) {
      console.log('修改继承人file',file)
      console.log('修改继承人list',fileList)
      this.file1 = file
      // 把文件添加到列表
      this.file1List[index] = []
      fileList.forEach(item => {
        this.file1List[index].push(item.raw)
      })
    },
    async uploadExcel() {
      // 提交按钮进入加载状态
      this.excelLoading = true
      let fd = new FormData()
      fd.append('file', this.excelFile[0].raw)
      fd.append('allowanceId', this.baseInfo.allowanceId)
      fd.append('gjjzh',this.gjjzh)
       const { data:{ data: res, code,msg } } = await this.$http.post('/employee/importEmployeeExcel',fd,{headers: {
           'Content-Type':'multipart/form-data'
      }})
      if (code !== 200) {
        this.excelLoading = false
        return this.$message.error(msg)
      }

      this.excelamountList = res.amountList;
      this.excelEmployeeList = res.employeeList;
      this.excelPreFillingList = res.preFillingList
      for (let i=0; i<this.excelEmployeeList.length; i++){
        const { data: { data: staff } } = await this.$http.get('employee/findByIdAndGjjzh',
          {params: {employeeId: this.excelEmployeeList[i], gjjzh: this.gjjzh}})
        this.stafflist.push({
          index: i,
          employeeId: this.excelEmployeeList[i],
          name: staff.name,
          registerState:staff.registerState,
          preFillingAmount: this.excelPreFillingList[i],
          idNumber: staff.idNumber,
          amount: this.excelamountList[i],
          cardNumber: staff.cardNumber
        })
      }
      this.excelamountList = [];
      this.excelEmployeeList = [];
      // 取消提交按钮加载状态
      this.excelLoading = false
      this.uploadExcelDialogVisible = false;
      this.getSatisticslist();
      this.$message.success('职工信息导入完成')
    },
    excelRemove() {
      this.excelListTable = [];
      this.$message.success('文件移除成功！');
      this.excelFile = [];
    },
    exceed: function() {
      this.$message.error("最多只能上传1个xls文件");
    },
    async onExcelChange (file) {
      if (
        file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        && file.raw.type !== 'application/vnd.ms-excel'
      ) {
        this.$message.error('请上传正确的文件类型！')
        this.$refs.excelUpload.clearFiles();
        return false
      }
      let fileReader = new FileReader()
      fileReader.onload = (ev) => {
        const data = ev.target.result;
        const workbook = XLSX.read(data, {
          type: 'binary'
        });
        for (let sheet in workbook.Sheets) {
          //循环读取每个文件
          const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
          //若当前sheet没有数据，则continue
          if(sheetArray.length === 0){
            continue;
          }
          for(let item in sheetArray){
            let rowTable = {};
            //这里的rowTable的属性名注意要与上面表格的prop一致
            //sheetArray的属性名与上传的表格的列名一致
            rowTable.sfzhm = sheetArray[item].职工身份证号码;
            rowTable.zgxm = sheetArray[item].职工姓名;
            rowTable.jhcxkkh = sheetArray[item].建行储蓄卡卡号;
            rowTable.slzfbtje = sheetArray[item].申领住房补贴金额;
            rowTable.sjhm = sheetArray[item].手机号码;
            rowTable.jcrsfzhm = sheetArray[item].继承人身份证号码;
            rowTable.jcrxm = sheetArray[item].继承人姓名;
            rowTable.yzbtje = sheetArray[item].预支补贴金额;
            this.excelListTable.push(rowTable);
          }
        }
      };
      fileReader.readAsBinaryString(file.raw);
      this.excelFile.push(file)
    },
    refresh() {
    },
    //暂存
    async tempSave() {
      let amountList = this.stafflist.map(obj => {return obj.amount})
      const preFillingAmountList = this.stafflist.map( item => item.preFillingAmount)
      let employeeList = this.stafflist.map(obj => {return obj.employeeId})
      let zbwhList = this.indicatorlist.map(obj => {return obj.zbwh})
      let allowance = {
        allowanceId: this.baseInfo.allowanceId,
        allowanceTime: null,
        amountList: amountList,
        preFillingAmountList,
        employeeList: employeeList,
        gjjzh: this.baseInfo.gjjzh,
        remark: this.baseInfo.remark,
        state: 0,
        zbwhList: zbwhList
      }
      const { data } = await this.$http.post('allowance/saveAllowance', allowance)
      if (data.code === 200) return this.$message.success('暂存成功！')
      this.$message.error('暂存失败！')
    },
    //提交
    async commit() {
      console.log(this.stafflist)
      let amountList = this.stafflist.map(obj => {return obj.amount})
      const preFillingAmountList = this.stafflist.map( item => item.preFillingAmount)
      let employeeList = this.stafflist.map(obj => {return obj.employeeId})
      let zbwhList = this.indicatorlist.map(obj => {return obj.zbwh})
      let allowance = {
        allowanceId: this.baseInfo.allowanceId,
        allowanceTime: null,
        amountList: amountList,
        preFillingAmountList,
        employeeList: employeeList,
        gjjzh: this.baseInfo.gjjzh,
        remark: this.baseInfo.remark,
        state: 1,
        zbwhList: zbwhList,
        lrr: sessionStorage.getItem('username')
      }
      const { data: res } = await this.$http.post('allowance/commitAllowance', allowance)
      if (res.code !== 200) return this.$message.error(res.msg)

      this.$message.success(res.msg)
      this.$router.push('/find')
    },
    cancel() {
      this.$router.push('/find');
    },
    // 指定要领取补贴的继承人
    async inheritorGetAllowance(index,inheritor) {
      // 检查继承人是否上传图片
      let falg = true
      this.editInheritor = inheritor
      await this.getInheritorImportList()

      this.importListInfo.Imports.forEach((item,index) => {
        if (item.IsReq === 1 && this.imgUrl[index] == null) {
          falg = false
          return this.$message.error("该继承人没有上传必要公证材料！")
        }
      })
      if (falg) {
        // 添加自定义属性preFillingAmount
        this.inheritorList[index].preFillingAmount = 0
        this.inheritorChoosedList.push(this.inheritorList[index])
        this.inheritorList.splice(index,1)
      }
    },
    // 取消领取补贴继承人的资格
    async removeChoosedInheritor(index) {
      // 删除该条继承人对应的领取记录id
      const inheritorRecordId = this.inheritorChoosedList[index].inheritorRecordId || -1
      const { data: res } = await this.$http.delete(`/inheritor/record/${inheritorRecordId}`)
      if (res.code !== 200) return this.$message.error('删除领取记录失败')

      // this.inheritorChoosedList.splice(index, 1)
      // 刷新这个弹窗，对应的上下两个数据列表
      this.getInheritorList(this.baseInfo.allowanceId, this.staff.employeeId)

      // this.inheritorChoosedList[index].realBroughtAmount = 0
      // this.inheritorList.push(this.inheritorChoosedList[index])
      // this.inheritorChoosedList.splice(index,1)
    },
    // 监听继承人分配金额按钮
    async setInheritorAmount(index, choosedInheritor) {
      // 当前设置领取金额的继承人的行号
      this.editHeritorAmountInfo.index = index
     for (let k in choosedInheritor) {
       // 将选中修改金额的这一行的对象属性，赋值给正在编辑金额的对象中
       this.editHeritorAmountInfo[k] = choosedInheritor[k]
     }
     // 添加一个旧金额属性，用于修改金额不合法时，恢复初始值
      this.editHeritorAmountInfo.oldAmount = this.editHeritorAmountInfo.realBroughtAmount
      this.editHeritorAmountInfo.oldPreFillingAmount = this.editHeritorAmountInfo.preFillingAmount

      this.editHeritorAmountDialogVisible = true
      console.log(this.editHeritorAmountInfo)
    },
    // 监听分配继承人金额弹窗确定事件
    editHeritorAmount() {
      console.log(this.editHeritorAmountInfo.realBroughtAmount)
      // 正则判断输入有效值金额输入不规范直接退出
      const amountBool = /^([1-9]\d{0,9}|0)(\.\d{1,2})?$/.test(this.editHeritorAmountInfo.realBroughtAmount)
      if (!amountBool) return this.$message.warning('补贴金额未设置有效值')
      const preFillingAmountBool = /^([1-9]\d{0,9}|0)(\.\d{1,2})?$/.test(this.editHeritorAmountInfo.realBroughtAmount)
      if (!preFillingAmountBool) return this.$message.warning('预补金额未设置有效值')

      this.inheritorChoosedList[this.editHeritorAmountInfo.index].realBroughtAmount = this.editHeritorAmountInfo.realBroughtAmount
      this.inheritorChoosedList[this.editHeritorAmountInfo.index].preFillingAmount = this.editHeritorAmountInfo.preFillingAmount
      let totalAmount = 0
      this.inheritorChoosedList.forEach(item => {
        console.log('实际领取金额：',item.realBroughtAmount)
        totalAmount += (item.realBroughtAmount * 100)
      })
      totalAmount/=100
      // if ( isNaN(totalAmount)){
      //   totalAmount = 0
      //
      console.log(typeof this.editHeritorAmountInfo.realBroughtAmount,  this.editHeritorAmountInfo.realBroughtAmount, this.editStaffInfo.amount,totalAmount)
      if (this.editHeritorAmountInfo.realBroughtAmount === '') {
        return this.$message.warning('补贴金额不能为空！')
      }
      if (parseFloat(this.editHeritorAmountInfo.realBroughtAmount) <= 0 ) {
        return this.$message.warning('请设置有效领取补贴金额！')
      }
      if (this.staff.amount === 0 ) {
        return this.$message.warning('未设置职工领取补贴金额！')
      }
      if (totalAmount > this.staff.amount) {
        console.log(this.editHeritorAmountInfo)
        this.inheritorChoosedList[this.editHeritorAmountInfo.index].realBroughtAmount = this.editHeritorAmountInfo.oldAmount
        return this.$message.warning('领取金额不能大于剩余金额')
      }

      if (parseFloat(this.editHeritorAmountInfo.preFillingAmount) > parseFloat(this.editHeritorAmountInfo.realBroughtAmount)) {
        return this.$message.warning('预补金额不能超过领取金额')
      }
      // this.inheritorChoosedList.some(item => {
      //   if (item.idNumber == this.editHeritorAmountInfo.idNumber) {
      //     item.realBroughtAmount = this.editHeritorAmountInfo.realBroughtAmount
      //     return true
      //   }
      // })
      this.inheritorChoosedList.push({})
      this.inheritorChoosedList.pop()
      this.editHeritorAmountInfo =  {
        index: null,
        name: '',
        realBroughtAmount: 0,
        // 不设置这个，导致关闭的时候data数据中没有默认值导致 v-model中找不到数据 就会导致输入框无法输入。
        preFillingAmount: 0
      }
      this.editHeritorAmountDialogVisible = false
    },
    // 提交继承人的金额领取情况,this.staff保存当前点击的员工信息,baseInfo存有补贴id
   async commitInheritorRealBroughtAmount() {
      // 文件上传结束后先生成json文件
      await this.$http.get('/inheritor/uploadComplete',{params: {
        employeeId: this.staff.employeeId,
        allowanceId: this.baseInfo.allowanceId,
        busiIds:this.importListInfo.Busiid,
        gjjzh: this.baseInfo.gjjzh
      }}).catch(()=>{
        this.$message.error('继承人领取金额信息提交失败!')
      })
      // 提交继承人的金额领取情况
      const { data } = await this.$http.post('inheritor/record',{
        employeeId: this.staff.employeeId,
        allowanceId: this.baseInfo.allowanceId,
        inheritorAmountList: this.inheritorChoosedList
        })
      if (data.code != 200) return this.$message.error(data.msg)
      this.$message.success('继承人领取信息提交成功')
      this.addInheritorDialogVisible = false
    },
    //控制指标文表格变色
    indexTextTableRowClassName({row, rowIndex}) {
      for (let i = 0; i < this.indexTextStateList.length; i++) {
        if( row.zbwh === this.indexTextStateList[i].zbwh && this.indexTextStateList[i].state === '标红') {
          console.log('设置成功')
          // console.log(this.employeeStateList[i])
          row.state = '标红'
          row.remark = this.indexTextStateList[i].remark
          return 'warning-row'
        }
      }
      return ''
    },
    // 控制职工表格变色
    employeeTableRowClassName({row, rowIndex}) {
      for (let i = 0; i < this.employeeStateList.length; i++) {
        if( row.employeeId === this.employeeStateList[i].employeeId && this.employeeStateList[i].state === '标红') {
          // console.log(this.employeeStateList[i])
          console.log('设置成功')
          row.state = '标红'
          row.remark = this.employeeStateList[i].remark
          return 'warning-row'
        }
      }
      return ''
    },
    // 删除外网数据库中的员工，内网是不能删除的
    async deleteStaffReal(staffObj) {
      const { data: res } =  await this.$http.delete(`/employee/${staffObj.idNumber}`)
      if (res.code !== 200) return this.$message.error('删除职工失败！')
      // 删除成功
      this.getStaffList()
      this.$message.success('删除职工成功！')
    },
    // 当选择要录入的员工，比如第二页就一个，我选了他，那么下次点击选择员工录入，就会出现空数据的情况
    // 因为请求的page还是2第二页，但后端去重之后，数据就只有一页了，这时打开的选择员工弹窗就会出现空数据的情况
    // 选择完点击确定的时候调用
    computeTheEnd(currentPage) {
      const lastPage = Math.ceil(this.addStaffListInfo.total / this.addStaffListInfo.pageSize)
      // 当前页码下的条数-1
      // console.log(typeof this.total, typeof this.queryInfo.pagesize, typeof lastPage)
      const subTotal = this.addStaffListInfo.total - ((lastPage - 1) * this.addStaffListInfo.pageSize) - 1
      // 最后一页。并且只有一条数据怎传入page-1，因为bug会导致newPage还是不存在数据的这一页码
      const resultPage = currentPage === lastPage && subTotal === 0 ? currentPage - 1 : currentPage
      this.addStaffListInfo.pageNum = resultPage
    },
    // 清空职工录入列表员工信息
    deleteStafflist() {
      // localStorage.setItem('tempStaff',JSON.stringify(this.stafflist))
      this.stafflist = []
      this.getSatisticslist()
    },
    // 公证材料放大查看
    handlePictureCardPreview(src) {
      // blob文件格式的url blob:http://localhost:8080/8b5ef96b-85ff-471c-94ce-d35b68ad6d7a
      this.dialogImageUrl = src
      this.imgdialogVisible = true
    },
    // 预览继承人上传材料的示例图片
    showPrePic(ImageInfo) {
      // 图片前端地址
      let fileURL = window.URL.createObjectURL(toBlob(ImageInfo.ImportPicBase64, ImageInfo.examplePicType, true))
      console.log(fileURL)
      this.prePicUrl = fileURL
      // 显示预览图片的盒子
      this.isShowPrePic = true
    }
  }
}
</script>

<style lang="less" scoped>
.el-tag {
  margin: 7px;
}

.bdtop {
  border-top: 1px solid #eee;
}

.bdbottom {
  border-bottom: 1px solid #eee;
}

.vcenter {
  display: flex;
  align-items: center;
}

/deep/ .el-table .warning-row {
  background: #FF6600;
}

/deep/ .el-switch {
  span {
    font-weight: bold;
  }
}

/deep/ .allowanceSwitch {
 span {
   color: red;
 }
}


/deep/ .el-table__header .el-table-column--selection .cell .el-checkbox::after {
  content: '全选';
  color: rgba(144, 147, 153);
  font-weight: 600;
}

// 当员工手机号为空时候，显示成灰色字体
.phoneNullState {
  color: #ccc;
  font-weight: bold;
}

/deep/ .el-alert__title {
  font-size: 18px;
  font-weight: bold;
}

.excelTop {
  margin-bottom: 15px;
  a {
    text-decoration: none;
    font-style: italic;
    color: #409EFF;
    font-weight: bold;
  }
}

.hoverImg {
  cursor: pointer;
}

.prePic {
  position: fixed;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  z-index: 99999;

  img {
    width: 300px;
    height: 300px;
    object-fit: contain;
  }

  &::before {
    content: "点击图片关闭";
    display: block;
    text-align: center;
    font-weight: bold;
    color: red;
  }
}
</style>
